<template>
  <div :class="switchClasses">
    <label 
      class="switch-toggle"
      :class="{ 'disabled': disabled }"
      :title="disabled ? '禁用' : (modelValue ? '关闭' : '开启')"
      @click="toggleSwitch"
    >
      <div 
        class="switch-track"
        :class="{ 'active': modelValue }"
        :style="{ '--active-color': activeColor }"
      >
        <div 
          class="switch-slider"
          :class="{ 'slid': modelValue }"
        >
          <span v-if="showIcons" class="switch-icon">
            <!-- 使用自定义图标或默认图标 -->
            <span :class="{ 'custom-icon': activeIcon }" v-if="modelValue && activeIcon">{{ activeIcon }}</span>
            <span :class="{ 'custom-icon': inactiveIcon }" v-else-if="!modelValue && inactiveIcon">{{ inactiveIcon }}</span>
            <!-- 默认图标 -->
            <span v-else-if="modelValue">☀️</span>
            <span v-else>🌙</span>
          </span>
        </div>
      </div>
    </label>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from 'vue'

// 定义属性
const props = defineProps({
  // 模型值 - 绑定开关状态
  modelValue: {
    type: Boolean,
    default: false
  },
  // 是否显示图标
  showIcons: {
    type: Boolean,
    default: true
  },
  // 自定义尺寸
  size: {
    type: String,
    default: 'medium', // 'small', 'medium', 'large'
    validator: (value: string) => ['small', 'medium', 'large'].includes(value)
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 自定义颜色
  activeColor: {
    type: String,
    default: '#4CD964' // iOS绿色
  },
  // 自定义图标 - 非激活状态
  inactiveIcon: {
    type: String,
    default: '🌙'
  },
  // 自定义图标 - 激活状态
  activeIcon: {
    type: String,
    default: '☀️'
  }
})

// 计算类名
const switchClasses = computed(() => ({
  'switch-wrapper': true,
  [props.size]: true
}))

// 定义事件
const emit = defineEmits<{
  // 更新模型值事件
  'update:modelValue': [value: boolean]
  // 切换事件
  'toggle': [value: boolean]
}>()

// 切换开关状态
const toggleSwitch = () => {
  if (!props.disabled) {
    const newValue = !props.modelValue
    emit('update:modelValue', newValue)
    emit('toggle', newValue)
  }
}
</script>

<style scoped>
/* 开关包装器 */
.switch-wrapper {
  display: inline-block;
  position: relative;
  --active-color: #4CD964;
  --inactive-color: rgba(120, 120, 120, 0.3);
  --track-width: 51px;
  --track-height: 31px;
  --slider-size: 27px;
  --slider-offset: 2px;
}

/* 开关切换标签 */
.switch-toggle {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: opacity 0.2s;
}

/* 禁用状态 */
.switch-toggle.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 轨道基础样式 - iOS样式液态玻璃效果 */
.switch-track {
  position: relative;
  width: var(--track-width);
  height: var(--track-height);
  /* 液态玻璃效果 */
  background: var(--inactive-color);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--track-height);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

/* 激活状态的轨道 */
.switch-track.active {
  background: var(--active-color);
  box-shadow: 0 0 20px var(--active-color);
}

/* 滑块基础样式 - 液态玻璃效果 */
.switch-slider {
  position: absolute;
  left: var(--slider-offset);
  top: var(--slider-offset);
  width: var(--slider-size);
  height: var(--slider-size);
  /* 液态玻璃效果 */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.5s ease;
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: url(#liquidGlass);
}

/* 滑块激活位置 */
.switch-slider.slid {
  transform: translateX(calc(var(--track-width) - var(--slider-size) - var(--slider-offset) * 2));
  box-shadow: 
    0 5px 10px rgba(0, 0, 0, 0.15),
    0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

/* 图标样式 */
.switch-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: 0;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* 自定义图标样式 */
.switch-icon .custom-icon {
  display: block;
}

/* 非激活状态图标颜色 */
.switch-icon {
  color: #666;
}

/* 激活状态的图标 */
.switch-slider.slid .switch-icon {
  color: #fff;
}

/* 激活状态时添加光晕效果 */
.switch-slider.slid .switch-icon {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 从点到面的颜色扩散效果 */
.switch-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--active-color);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.switch-track.active::before {
  width: 200%;
  height: 200%;
  opacity: 0.8;
  animation: pulse-out 0.6s ease-out;
}

@keyframes pulse-out {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* 选中图标 */
.icon-check {
  width: 14px;
  height: 14px;
}

/* 点击效果 - 更自然的物理反馈 */
.switch-toggle:active .switch-slider {
  transform: scale(0.92);
}

.switch-toggle:active .switch-slider.slid {
  transform: translateX(calc(var(--track-width) - var(--slider-size) - var(--slider-offset) * 2)) scale(0.92);
}

/* 尺寸变体 */
.switch-wrapper.small {
  --track-width: 40px;
  --track-height: 24px;
  --slider-size: 20px;
  --slider-offset: 2px;
}

.switch-wrapper.small .switch-icon {
  font-size: 10px;
}

.switch-wrapper.small .icon-check {
  width: 12px;
  height: 12px;
}

.switch-wrapper.large {
  --track-width: 62px;
  --track-height: 36px;
  --slider-size: 32px;
  --slider-offset: 2px;
}

.switch-wrapper.large .switch-icon {
  font-size: 14px;
}

.switch-wrapper.large .icon-check {
  width: 16px;
  height: 16px;
}

/* 深色主题适配 */
:global([data-theme="dark"]) .switch-track {
  background: rgba(84, 84, 84, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

:global([data-theme="dark"]) .switch-slider {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* 添加渐变光晕效果 */
.switch-track::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.switch-track.active::before {
  opacity: 1;
}

/* 动画效果 */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.switch-track.active {
  animation: ripple 0.6s ease-out;
}
</style>